<template>
  <!--商品支付订单组件-->
  <div class="app-container">
    <el-table ref="table" :data="OrderList" border  v-loading="loading">
      <el-table-column type="index" label="序号" align="center"></el-table-column>
      <el-table-column prop="title" label="订单标题" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="orderNo" label="商户订单编号" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="userId" label="用户ID" align="center"></el-table-column>
      <el-table-column prop="productId" label="支付产品ID" align="center"></el-table-column>
      <el-table-column label="订单金额(元)" align="center">
        <!-- 格式化金额显示 -->
        <template slot-scope="scope">
          <el-tag>{{ scope.row.totalFee }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="订单二维码链接" align="center">
        <template v-slot="scope">
          <template  v-if="scope.row.orderStatus === 'NOT_PAY'">
            <el-link icon="el-icon-share" type="primary"  @click="goPay(scope.row)">
              去支付
            </el-link>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_order_status" :value="scope.row.orderStatus" />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>

      <el-table-column label="操作" align="center">
        <template v-slot="scope">

          <template v-if="scope.row.orderStatus === 'PAY_SUCCESS'">
            <el-button size="small" type="text" icon="el-icon-error" @click="open_refundPay(scope.row)">退款</el-button>
          </template>
          <template v-else-if="scope.row.orderStatus === 'NOT_PAY'">
            <el-button size="small" type="text" icon="el-icon-info" @click="CancelPay(scope.row)">取消支付</el-button>
          </template>

        </template>

      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <el-dialog title="退款订单详情" :visible.sync="isShow_Refund" append-to-body>
      <el-form ref="form" :model="RefundOrder" label-width="100px">
        <el-form-item label="退款理由">
          <el-select v-model="RefundOrder.reason" placeholder="请选择退款理由">
            <el-option
              v-for="item in (dict.type.sys_reason_type)"
              :key="item.dictCode"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <br>
          <el-button type="primary" @click="RefundOrderClick">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

import {listOrder} from "@/api/pay/paylist";
import {alipayTradeCancel, alipayTradeRefund} from "@/api/pay/alipay";

export default {
  dicts: ['sys_order_status','sys_reason_type'],
  data(){
    return {
      OrderList:[],
      queryParams:{
        pageNum:1,
        pageSize:10,
      },
      total:0,
      loading:true,
      isShow_Refund:false,
      RefundOrder:{
        reason: "", // 退款理由
      },
      order_no: "", // 订单号(退款用)
    }
  },
  methods:{
    getList(){
      listOrder(this.queryParams).then(res => {
        this.OrderList = res.rows;
        this.total = res.total;
        this.loading = false;
      })
    },
    // 去支付
    goPay(row){
      document.write(row.codeUrl);
    },
    open_refundPay(row){
      this.isShow_Refund = !this.isShow_Refund;
      this.order_no = row.orderNo;
    },
    RefundOrderClick(){
      alipayTradeRefund(this.order_no,this.RefundOrder.reason).then(res => {
        this.getList();
        this.isShow_Refund = false;
        this.$message.success("退款成功");
      })
    },
    CancelPay(row){
      this.$confirm('此操作将取消该支付订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        alipayTradeCancel(row.orderNo).then(res => {
          this.getList();
          this.$message.success("取消支付成功");
        })
      });
    },
  },
  mounted() {
    this.getList();
  }
}
</script>

<style scoped>

</style>
